<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <style>
        ul{list-style-type: none; padding: 0px;margin: 0px;}
        li{width: 100px;}
        ul.lanmu>li{background-color: blue;color: white;}
        ul.caidan>li{background-color: white;color: black}
        .container select{
            width: 200px;
            height: 300px;
        }
    
    
    </style>
</head>
<body>
   <ul class="lanmu">
     <li class="class1">栏目1
       <ul class="caidan">
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>

       </ul>

     </li>

     <li class="class1">栏目2
            <ul class="caidan">
                 <li>菜单1</li>
                 <li>菜单2</li>
                 <li>菜单3</li>
     
            </ul>
     
          </li>
     

   </ul>

             <div class="container">

                 <div class="source">
                   <select name="" id="leftselect" multiple="multiple">
                       <option value="">文件</option>
                       <option value="">编辑</option>
                       <option value="">选择</option>


                       <option value="">查看</option>
                       <option value="">转到</option>
                         </select>
                         <button class="movetorightone"> &gt;</button>
                         <button class="movetorightall">&gt;&gt;</button>
                         <button class="movetoleftone">&lt;</button>
                         <button class="movetoleftall"> &lt;&lt;</button>
                         <select name="" id="rightselect" multiple="multiple"></select>
                         

                 </div>

             </div>

    <script>

       /* $('ul.lanmu >li').click(function(){
            $(this).siblings().children().children().css('display','none');
            $(this).children().children().css('display','block');
        });*/

             $('.movetorightone').on('click',function(){
                 $('#leftselect option:selected').appendTo('#rightselect');
             });
             $('ul.lanmu >li').click(function(){

             })

  
    </script>
    
</body>
</html>